<template>
  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <a href="main" class="item">首页</a>
      </div>
      <div class="right">

        <template v-if="account">
          <a :href="'viewListOrder?name=' + account.name" class="item">我的订单</a>
          <a href="signOff" class="item">退出登录</a>
          <a href="MyAccountForm" class="item">个人主页</a>
        </template>

        <!--        <template v-else>-->
        <!--          <a href="loginForm" class="item">我的订单</a>-->
        <!--          <a href="register" class="item">注册</a>-->
        <!--          <a href="loginForm" class="item">登录</a>-->
        <!--        </template>-->
        <!--        <c:if test="${sessionScope.account!=null}">-->
        <!--          <a href="viewListOrder?name=${sessionScope.account.name}" class="item">我的订单</a>-->
        <!--          <a href="signOff" class="item">退出登录</a>-->
        <!--          <a href="MyAccountForm" class="item">个人主页</a>-->
        <!--        </c:if>-->
        <!--        <c:if test="${sessionScope.account==null}">-->
        <!--          <a href="loginForm" class="item">我的订单</a>-->
        <!--          <a href="register" class="item">注册</a>-->
        <!--          <a href="loginForm" class="item">登录</a>-->
        <!--        </c:if>-->
      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>
        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>
      </div>
    </div>
    <div class="main-promote">
      <!--以上是头部信息-->




  <div id="BackLink">
    <a href="main">回到主页面</a>
  </div>
  <br/>
  <div class="public-shop-cart-one">

    <div class="content">
      <span>检索商品</span>
      <div class="cart-title">
        <span style="width: 600px">商品</span>
        <span>所属小类ID</span>
        <span>名字</span>
        <span>所属种类</span>
        <span>操作</span>
      </div>

      <div class="cart-detail" v-for="product in products">
          <div class="cart-title" style="width: 600px">
           <img :src="toRaw(product).descn">
          </div>

          <div class="cart-price">
            {{ toRaw(product).productId }}
          </div>

          <div class="cart-price">
            {{ toRaw(product).name }}
          </div>

          <div class="cart-price">
            {{ toRaw(product).category }}
          </div>

          <div >
            <router-link to="/catalog/Product" @click="handleClick(toRaw(product).productId)">获取商品
            </router-link>
          </div>
    </div>
    </div>
  </div>

      <!--以下是尾部信息-->
    </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </body>

</template>

<script setup>

import {onMounted, toRaw} from "vue";
import api from "../../api/index.js";

onMounted(() => {
  getData();
})

const getData = () => {

  api.getProductList().then(res => {
    //这里首先要判断一下状态码
    var statusCode = res.data.status;
    console.log("statusCode is : " + statusCode);
    //在前端对session进行存储
    console.log(res.data.data);
    products.value=res.data.data;
    console.log(toRaw(products.value));
    // console.log(products.value);
  })
}

const searchKeyword = ref('')

//搜索部分内容
function searchProducts() {
  // 这里写提交搜索的逻辑代码，使用searchKeyword.value获取搜索关键字
  console.log(searchKeyword.value);
  api.getSearchResult(searchKeyword.value).then(res => {
    //这里首先要判断一下状态码
    console.log("好好回去");
    var statusCode = res.data.status;
    console.log("statusCode is : " + statusCode);
  })
  getData();

}


function handleClick(productId) {
  console.log("hhhh");
  //测试后端向前端传数据，成功！
  api.setProductSession(productId).then(res => {
    //这里首先要判断一下状态码
    var statusCode = res.data.status;
    console.log("statusCode is : " + statusCode);
  })

}
import { ref } from 'vue'
const products = ref([])


</script>

<script>
export default {
  setup() {
    return {
      products
    }
  }
}
</script>
<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>